<div class="clearfix text-center col-xs-12">
	<a href="#" class="js-back-to-sidebar pull-left btn btn-xs btn-link">
			<i class="icon-caret-left"></i>
	</a>
	<span class="col-xs-10 navbar-btn"><strong><%- i18next.t('Filter Cards') %></strong></span>
</div>
<div class="col-xs-12 divider"></div>
<div class="col-xs-12 member-modal js-pre-scrollable vertical-scrollbar">
<% if (board.labels.length > 0 || board.board_users.length > 0) { %> 
<div class="clearfix">
	<form><div class="form-group"><input class="js-filter-cards form-control" id="inputSearchBoardLabels" name="name"><span class="help-block">Type to filter labels, members.</span></div></form>
</div>
<% } %>
	<ul class="nav nav-pills nav-stacked js-board-dues">
		<li class="clearfix js-due-filter cur card-label-show h5 btn-link"><div class="navbar-btn clearfix media htruncate"><%- i18next.t('Due in the next day') %> <span class="js-due hide">day</span></div></li>
		<li class="clearfix js-due-filter cur card-label-show h5 btn-link"><div class="navbar-btn clearfix media htruncate"><%- i18next.t('Due in the next week') %> <span class="js-due hide">week</span></div></li>
		<li class="clearfix js-due-filter cur card-label-show h5 btn-link"><div class="navbar-btn clearfix media htruncate"><%- i18next.t('Due in the next month') %> <span class="js-due hide">month</span></div></li>
		<li class="clearfix js-due-filter cur card-label-show h5 btn-link"><div class="navbar-btn clearfix media htruncate"><%- i18next.t('Overdue') %> <span class="js-due hide">overdue</span></div></li>
	</ul>
	<hr>
	<% if (board.labels.length > 0) { %>
	<ul class="nav nav-pills nav-stacked js-board-labels">
	<%
		var labels = board.labels.pluck("name");
		labels = _.uniq(labels, function(label) { 
			return label;
		});
		_.each(labels, function(label) { 
			var current_label = board.labels.findWhere({
				'name': label
			});
			if (current_label) { %>
				<li class="clearfix js-toggle-label-filter cur card-label-show h5 btn-link media">
					<span style="background:<%- (current_label.attributes.color) ? current_label.attributes.color : '#'+converter.colorCode(''+current_label.attributes.name).substring(0, 6) %>;color:#ffffff" class="pull-left btn btn-xs"><i class="<%= LABEL_ICON %> icon-light"></i></span><div class="htruncate js-label"><%-current_label.attributes.name %></div>
				</li>
		<% 	} 
		}); %>
	</ul>
	<hr>
	<% } %>
	<% if (board.board_users.length > 0) { %>
	<ul class="nav nav-pills nav-stacked js-board-users">
		<% board.board_users.each(function(board_user) { %>
		<li class="clearfix js-toggle-member-filter cur card-label-show h5 btn-link">
			<div class="navbar-btn clearfix media">
				<span class="pull-left">
					<% if(!_.isEmpty(board_user.attributes.profile_picture_path)){ 
						var profile_picture_path = board.showImage('User', board_user.attributes.user_id, 'small_thumb' );
					%>
						<img class="img-rounded img-responsive" src="<%- profile_picture_path%>" alt="[Images: <%- board_user.attributes.username%>]" title="<%- board_user.attributes.username%>" />
					<% }else{ %>
						<i class="avatar avatar-color-194 img-rounded" title="<%- board_user.attributes.username%>"><%- board_user.attributes.initials%></i>
					<% } %> 
				</span>			
				<span data-user = "<%-board_user.attributes.username %>" class="pull-left navbar-btn htruncate">
					<%-board_user.attributes.username %>
					<span class="js-user hide">user-filter-<%-board_user.attributes.user_id %></span>
				</span>
			</div>
		</li>
		<% }); %>
	</ul>
	<hr>
	<% } %>
	<ul class="list-color-pad list-inline list-color-alignment js-board-colors" style="margin-left: -15px;margin-right: -15px;">
		<li class="list-inline js-card-color js-toggle-color-filter navbar-btn cur" data-color="34495e"><span class="background-box show well-sm" style="background-color:#34495e"></span></li>
		<li class="list-inline js-card-color js-toggle-color-filter navbar-btn cur" data-color="23719f"><span class="background-box show well-sm" style="background-color:#23719f"></span></li>
		<li class="list-inline js-card-color js-toggle-color-filter navbar-btn cur" data-color="5a966e"><span class="background-box show well-sm" style="background-color:#5a966e"></span></li>
		<li class="list-inline js-card-color js-toggle-color-filter navbar-btn cur" data-color="bf4a40"><span class="background-box show well-sm" style="background-color:#bf4a40"></span></li>
		<li class="list-inline js-card-color js-toggle-color-filter navbar-btn cur" data-color="444444"><span class="background-box show well-sm" style="background-color:#444444"></span></li>
		<li class="list-inline js-card-color js-toggle-color-filter navbar-btn cur" data-color="4f4d7e"><span class="background-box show well-sm" style="background-color:#4f4d7e"></span></li>
		<li class="list-inline js-card-color js-toggle-color-filter navbar-btn cur" data-color="2f663c"><span class="background-box show well-sm" style="background-color:#2f663c"></span></li>
		<li class="list-inline js-card-color js-toggle-color-filter navbar-btn cur" data-color="a37e58"><span class="background-box show well-sm" style="background-color:#a37e58"></span></li>
		<li class="list-inline js-card-color js-toggle-color-filter navbar-btn cur" data-color="5f778e"><span class="background-box show well-sm" style="background-color:#5f778e"></span></li>
		<li class="list-inline js-card-color js-toggle-color-filter navbar-btn cur" data-color="0091ff"><span class="background-box show well-sm" style="background-color:#0091ff"></span></li>
		<li class="list-inline js-card-color js-toggle-color-filter navbar-btn cur" data-color="46ba97"><span class="background-box show well-sm" style="background-color:#46ba97"></span></li>
		<li class="list-inline js-card-color js-toggle-color-filter navbar-btn cur" data-color="f47564"><span class="background-box show well-sm" style="background-color:#f47564"></span></li>
		<li class="list-inline js-card-color js-toggle-color-filter navbar-btn cur" data-color="6b6b6b"><span class="background-box show well-sm" style="background-color:#6b6b6b"></span></li>
		<li class="list-inline js-card-color js-toggle-color-filter navbar-btn cur" data-color="7b5cb3"><span class="background-box show well-sm" style="background-color:#7b5cb3"></span></li>
		<li class="list-inline js-card-color js-toggle-color-filter navbar-btn cur" data-color="65ab36"><span class="background-box show well-sm" style="background-color:#65ab36"></span></li>
		<li class="list-inline js-card-color js-toggle-color-filter navbar-btn cur" data-color="bd6f32"><span class="background-box show well-sm" style="background-color:#bd6f32"></span></li>
		<li class="list-inline js-card-color js-toggle-color-filter navbar-btn cur" data-color="819da2"><span class="background-box show well-sm" style="background-color:#819da2"></span></li>
		<li class="list-inline js-card-color js-toggle-color-filter navbar-btn cur" data-color="47b7cd"><span class="background-box show well-sm" style="background-color:#47b7cd"></span></li>
		<li class="list-inline js-card-color js-toggle-color-filter navbar-btn cur" data-color="95d9ad"><span class="background-box show well-sm" style="background-color:#95d9ad"></span></li>
		<li class="list-inline js-card-color js-toggle-color-filter navbar-btn cur" data-color="f7b09c"><span class="background-box show well-sm" style="background-color:#f7b09c"></span></li>
		<li class="list-inline js-card-color js-toggle-color-filter navbar-btn cur" data-color="999999"><span class="background-box show well-sm" style="background-color:#999999"></span></li>
		<li class="list-inline js-card-color js-toggle-color-filter navbar-btn cur" data-color="baa1e6"><span class="background-box show well-sm" style="background-color:#baa1e6"></span></li>
		<li class="list-inline js-card-color js-toggle-color-filter navbar-btn cur" data-color="9dbb1d"><span class="background-box show well-sm" style="background-color:#9dbb1d"></span></li>
		<li class="list-inline js-card-color js-toggle-color-filter navbar-btn cur" data-color="ffce54"><span class="background-box show well-sm" style="background-color:#ffce54"></span></li>
		<li class="list-inline js-card-color js-toggle-color-filter navbar-btn cur" data-color="b3bec1"><span class="background-box show well-sm" style="background-color:#b3bec1"></span></li>
		<li class="list-inline js-card-color js-toggle-color-filter navbar-btn cur" data-color="bee5f3"><span class="background-box show well-sm" style="background-color:#bee5f3"></span></li>
		<li class="list-inline js-card-color js-toggle-color-filter navbar-btn cur" data-color="caefd2"><span class="background-box show well-sm" style="background-color:#caefd2"></span></li>
		<li class="list-inline js-card-color js-toggle-color-filter navbar-btn cur" data-color="f7d2c8"><span class="background-box show well-sm" style="background-color:#f7d2c8"></span></li>
		<li class="list-inline js-card-color js-toggle-color-filter navbar-btn cur" data-color="d5d5d5"><span class="background-box show well-sm" style="background-color:#d5d5d5"></span></li>
		<li class="list-inline js-card-color js-toggle-color-filter navbar-btn cur" data-color="dbcff1"><span class="background-box show well-sm" style="background-color:#dbcff1"></span></li>
		<li class="list-inline js-card-color js-toggle-color-filter navbar-btn cur" data-color="ccdc87"><span class="background-box show well-sm" style="background-color:#ccdc87"></span></li>
		<li class="list-inline js-card-color js-toggle-color-filter navbar-btn cur" data-color="f1eabf"><span class="background-box show well-sm" style="background-color:#f1eabf"></span></li>
</ul>
	  <hr>
	<ul class="nav nav-pills nav-stacked js-filter-conjunction">
		<li class="clearfix js-filter-mode cur card-label-show h5 btn-link" id="js-mode-or">
			<div class="navbar-btn clearfix media">
				<%- i18next.t('Matches any label and any member') %>
				<span class="js-filter hide">or</span>
			</div>
			<i class="icon-ok js-filter_mode-icon cur pull-right"></i>
		</li>
		<li class="clearfix js-filter-mode cur card-label-show h5 btn-link" id="js-mode-and">
			<div class="navbar-btn clearfix media">
				<%- i18next.t('Matches all labels and all members') %>
				<span class="js-filter hide">and</span>
			</div>
		</li>
	</ul>
	<hr>
	<ul class="nav nav-pills nav-stacked">
		<li class="clearfix h5 btn-link">
			<span class="js-clear-all text-muted"><%- i18next.t('Clear Filter') %></span>
		</li>
	</ul>
</div>